<template>
	<view>
		<u-search placeholder="请输入" v-model="keyword" @search="sear()"></u-search>
		<view class="u-demo-block">
			<u-swiper :list="data" keyName="coverImage" showTitle previousMargin="30" nextMargin="30" circular
				:autoplay="true" radius="5" bgColor="#ffffff"></u-swiper>
		</view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="daat" @click='onclick'></u-tabs>
		</u-sticky>
		<view class="xxq">
			<navigator v-for="(item,index) in list" style="width: 180px;" :key="index"
				:url="`/pages/xqy/xqy?id=${item.id}`">
				<u--image :showLoading="true" :src="item.coverImage" width="170px" height="330px"
					style="border: 5px saddlebrown solid;"></u--image>
				<view>
					名字：{{item.name}}
				</view>
				<view>
					<span style="color: red;">价格：</span>{{item.price}} <span>￥</span>

				</view>

			</navigator>
			<u-divider text="到底了" :dashed="true" lineColor="#ff0000" style="width: 100%;"></u-divider>
		</view>
		<u-popup :show="show" mode="top" @close="close" @open="open">
			<view>
				<text>没有了</text>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import {
		getIllnesssAPIs,
		getMedicineAPIs,
		getMedicineCategoryAPI,
		getMedicineAPIIs,
		getIllnesssAPI
	} from "../../services/api.js"
	import {
		dalImg
	} from "../../utils/tools.js"
	export default {
		data() {
			return {
				aaa: false,
				keyword: "",
				show: false,
				data: [

				],
				list: [],
				daat: [

				],
				dat: {
					keyword: '',
					page: "1",
					per: "10"
				},

				userInfo: {
					page: "1",
					per: 10
				},
				userInf: {
					page: "1",
					per: "10"
				},
				pae: "0",


			}

		},
		methods: {
			sear() {
				console.log(this.keyword);
				this.dat.keyword = this.keyword
				getIllnesssAPI(this.dat).then((res) => {
					this.list = []
					this.list = res.data.list.map((item) => ({
						...item,
						coverImage: dalImg(item.image)
					}))
					console.log(res);
				})

			},
			liat() {
				getIllnesssAPIs(this.userInfo).then((res) => {
					// console.log(res);
					this.data = res.data.map((item) => ({
						...item,
						coverImage: dalImg(item.image),
						title: item.desc
					}))
					console.log(this.data[1].coverImage);
				})
			},
			leas() {
				getMedicineAPIs(this.userInf).then((res) => {
					console.log(res);
					this.list.push(...res.data.list.map((item) => ({
						...item,
						coverImage: dalImg(item.image)
					})))
					console.log(this.list);
				})

			},
			last() {
				getMedicineCategoryAPI().then((res) => {
					this.daat = res.data
					this.daat.unshift({
						name: "全部",
						id: "2"
					})
					console.log(this.daat);

				})

			},
			onReachBottom() {
				console.log("到底了");
				if (this.list.length >= 10) {
					this.userInf.page++
					this.leas()
				}

			},
			onclick(item) {
				console.log(item.id);

				if (item.id != 2) {
					console.log('ok');
					getMedicineAPIIs(item.id, this.userInfo).then(res => {
						console.log(res);
						this.list = []
						this.list = res.data.list.map((item) => ({
							...item,
							coverImage: dalImg(item.image)
						}))
						console.log(this.list);
						if (this.list.length == 0) {
							this.show = true
						}
					})

				}
				if (item.id == 2) {
					this.list = []
					this.leas()



				}
			},
			close() {
				this.show = false
				// console.log('close');

			}

		},

		onLoad() {
			this.liat()
			this.leas()
			this.last()
		},
	}
</script>

<style>
	.xxq {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;




	}
</style>